import moveEvent from '@/util/moveEvent'
import keyboard from '@/util/keyboard'
var viewer = function () {
    this.html = $(`
        <div class="p_abs viewer">
            <div class="moveMark"></div>
            <div class="p_abs viewer_layout">
                <div class="viewer_board">
                    <div class="p_abs" id="cancelSelect"></div>
                    <div class="innerMark" id="innerMark"></div>
                </div>
            </div>
        </div>`);
    this.viewerLayout = this.html.find('.viewer_layout');
    this.ruler = this.html.find('.rulerCanvas');
    this.moveMark = this.html.find('.moveMark').hide();
    this.innerMark = this.html.find('.innerMark').hide();
    this.viewerBoard = this.html.find('.viewer_board');
    this.cancelSelectEle = this.html, find('#this.cancelSelect');
    this.events = {
        cancel: function () { }
    };
    this.viewerBoard.css({
        width: 1920,
        height: 1080,
        background: '#fff',
        margin: '-540px 0 0 -960px',
        left: '50%',
        top: '50%'
    });
    setTimeout(() => {
        this.renderZoom();
    }, 10);
    this.position = [0, 0];
    this.scale = 1;
    this.moveMark.mousedown((e) => {
        var isSpace = keyboard.isPressed('space');
        if (isSpace) {
            var X = this.position[0];
            var Y = this.position[1];
            var width = this.viewerLayout.width();
            var height = this.viewerLayout.height()
            moveEvent(e, (left, top) => {
                X = this.position[0] + left;
                Y = this.position[1] + top;
                if (X > width * 0.7 * this.scale) X = width * 0.7 * this.scale;
                if (X < width * - 0.7 * this.scale) X = width * - 0.7 * this.scale;
                if (Y > height * 0.7 * this.scale) Y = height * 0.7 * this.scale;
                if (Y < height * - 0.7 * this.scale) Y = height * - 0.7 * this.scale;
                this.viewerBoard.css({
                    transform: 'translateX(' + X + 'px) translateY(' + Y + 'px) scale(' + this.scale + ')'
                });
                this.drawX(X);
                this.drawY(Y);
            }, () => {
                this.position = [X, Y];
            });
        };
    });
    $(document).keydown((e) => {
        if (e.keyCode == 32) {
            this.moveMark.show();
        };
    });
    $(document).keyup((e) => {
        if (e.keyCode == 32) {
            this.moveMark.hide();
        };
    });
    document.addEventListener('mousewheel', (e) => {
        e = e || window.event;
        if ((e.wheelDelta && e.ctrlKey) || e.detail) {
            e.preventDefault();
            if (e.deltaY > 0) {
                // 鼠标下滚轮
                this.zoomMinus();
            } else if (e.deltaY < 0) {
                // 鼠标上滚轮
                this.zoomAdd();
            };
            this.drawX();
            this.drawY();
        }
    }, {
        capture: false,
        passive: false
    });
    this.rulerXElement = $('<canvas class="rulerCanvasX"></canvas>');
    this.rulerYElement = $('<canvas class="rulerCanvasY"></canvas>')
    this.html.append(this.rulerXElement);
    this.html.append(this.rulerYElement);
    this.leftMark = null;

    this.cancelSelectEle.click(() => {
        this.events.cancel();
    });

};
viewer.prototype.onCancel = function (event) {
    this.events.cancel = event;
};

viewer.prototype.showInnerMark = function () {
    this.innerMark.show();
};
viewer.prototype.hideInnerMark = function () {
    this.innerMark.hide();
};

viewer.prototype.zoomMinus = function () {
    this.scale -= 0.1;
    if (this.scale < 0.5) this.scale = 0.5;
    if (this.scale > 3) this.scale = 3;
    this.viewerBoard.css({
        transform: 'translateX(' + this.position[0] + 'px) translateY(' + this.position[1] + 'px) scale(' + this.scale + ')'
    });
    this.drawX();
    this.drawY();
};
viewer.prototype.zoomAdd = function () {
    this.scale += 0.1;
    if (this.scale < 0.5) this.scale = 0.5;
    if (this.scale > 3) this.scale = 3;
    this.viewerBoard.css({
        transform: 'translateX(' + this.position[0] + 'px) translateY(' + this.position[1] + 'px) scale(' + this.scale + ')'
    });
    this.drawX();
    this.drawY();
};
viewer.prototype.drawX = function (X) {
    var VLWidth = this.viewerLayout.width();
    var VBWidth = this.viewerBoard.width();
    this.rulerXElement[0].width = VLWidth;
    this.rulerXElement[0].height = 30;
    this.rulerXElement.css({
        width: VLWidth,
    });
    var leftPoint = (VLWidth - parseInt(VBWidth * this.scale)) / 2 + (X || this.position[0]);
    var ctx = this.rulerXElement[0].getContext('2d');
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 0.4;
    ctx.fillStyle = '#999';
    ctx.font = "10px '微软雅黑'";
    ctx.textBaseline = 'top'
    var unit = 10 * this.scale;
    ctx.beginPath();
    ctx.moveTo(leftPoint, 0);
    ctx.lineTo(leftPoint, 30);
    ctx.fillText(0, leftPoint + 5, 5);
    var lineCache = leftPoint;
    var length = 0;
    var drawLine = function () {
        if (lineCache + unit < VLWidth) {
            lineCache += unit;
            length += 1;
            var remainder = length % 10;
            !remainder && ctx.fillText(length * 10, lineCache + 5, 5);
            ctx.moveTo(lineCache, (remainder == 0 ? 10 : (length % 5 == 0 ? 15 : 20)));
            ctx.lineTo(lineCache, 30);
            drawLine();
        };
    };
    drawLine();
    var lineCacheDip = leftPoint;
    var lengthDip = 0;
    var drawLineDip = function () {
        if (lineCacheDip - unit > 0) {
            lineCacheDip -= unit;
            lengthDip -= 1;
            var remainder = lengthDip % 10;
            !remainder && ctx.fillText(lengthDip * 10, lineCacheDip + 5, 5);
            ctx.moveTo(lineCacheDip, (remainder == 0 ? 10 : (lengthDip % 5 == 0 ? 15 : 20)));
            ctx.lineTo(lineCacheDip, 30);
            drawLineDip();
        };
    };
    drawLineDip();
    ctx.stroke();
};
viewer.prototype.drawY = function (Y) {
    var VLHeight = this.viewerLayout.height();
    var VBHeight = this.viewerBoard.height();
    this.rulerYElement[0].height = VLHeight;
    this.rulerYElement[0].width = 20;
    this.rulerYElement.css({
        height: VLHeight,
    });
    var topPoint = (VLHeight - parseInt(VBHeight * this.scale)) / 2 + (Y || this.position[1]);
    var ctx = this.rulerYElement[0].getContext('2d');
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 0.4;
    ctx.fillStyle = '#999';
    ctx.font = "9px '字体','字体','微软雅黑','宋体'";
    ctx.textBaseline = 'top'
    var unit = 10 * this.scale;
    ctx.beginPath();
    ctx.moveTo(0, topPoint);
    ctx.lineTo(30, topPoint);
    var lineCache = topPoint;
    var length = 0;
    ctx.fillText(0, 5, topPoint + 5);
    var drawLine = function () {
        if (lineCache + unit < VLHeight) {
            lineCache += unit;
            length += 1;
            var remainder = length % 10;
            if (!remainder) {
                var string = (length * 10).toString().split('');
                for (let i = 0; i < string.length; i++) {
                    const element = string[i];
                    ctx.fillText(element, 3, lineCache + (i * 8) + 5);
                }
            };
            ctx.moveTo((remainder == 0 ? 0 : (length % 5 == 0 ? 10 : 15)), lineCache);
            ctx.lineTo(30, lineCache);
            drawLine();
        };
    };
    drawLine();
    var lineCacheDip = topPoint;
    var lengthDip = 0;
    var drawLineDip = function () {
        if (lineCacheDip - unit > 0) {
            lineCacheDip -= unit;
            lengthDip -= 1;
            var remainder = lengthDip % 10;
            if (!remainder) {
                var string = (lengthDip * 10).toString().split('');
                for (let i = 0; i < string.length; i++) {
                    const element = string[i];
                    if (element == '-') {
                        ctx.lineWidth = 1;
                        ctx.moveTo(7, lineCacheDip + (i * 8) + 5);
                        ctx.lineTo(7, lineCacheDip + (i * 8) + 10);
                    } else {
                        ctx.fillText(element, 3, lineCacheDip + (i * 8) + 5);
                    };
                }
            };
            ctx.lineWidth = 0.4;
            ctx.moveTo((remainder == 0 ? 0 : (lengthDip % 5 == 0 ? 10 : 15)), lineCacheDip);
            ctx.lineTo(30, lineCacheDip);
            drawLineDip();
        };
    };
    drawLineDip();
    ctx.stroke();
};
viewer.prototype.renderZoom = function () {
    var BodyWidth = this.viewerLayout.width();
    var zoomWidth = BodyWidth * 0.9;
    this.scale = zoomWidth / this.viewerBoard.width();
    this.viewerBoard.css({
        transform: 'scale(' + this.scale + ')',
    });
    this.drawX();
    this.drawY();
};
viewer.prototype.getChangeMoveBarOptions = function () {
    return {
        width: this.html.width(),
        height: this.html.height(),
        top: parseInt(this.html.css('top')),
        left: parseInt(this.html.css('left')),
        bottom: parseInt(this.html.css('bottom')),
        right: parseInt(this.html.css('right')),
    };
};
viewer.prototype.changeMoveBarEvent = function (left, top, sign) {
    var ww = $(document).width();
    var _right = sign.right - left;
    if (_right > ww / 3) _right = ww / 3;
    if (_right < 210) _right = 210;
    this.html.css('right', _right);
    this.drawX();
    this.drawY();
};
viewer.prototype.changeMoveBarEventLeft = function (left, top, sign) {
    var ww = $(document).width();
    var _left = sign.left + left;
    if (_left > ww / 3) _left = ww / 3;
    if (_left < 210) _left = 210;
    this.html.css('left', _left);
    this.drawX();
    this.drawY();
};






export default viewer;